<template>
  <default-home-card icon="BarChartOutlined" title="仓库动态">
    <div>仓库库存变动趋势</div>
    <div class="echarts-box" @click="toDetail('/storage/inwarehouse/inventory')">
      <div class="gradient-main" id="gradient-main"></div>
    </div>
  </default-home-card>
</template>
<script setup lang="ts">
import DefaultHomeCard from '@/views/system/home/components/default-home-card.vue'
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { homeApi } from '@/api/system/home-api'

const router = useRouter()

onMounted(() => {
  init()
})

// 跳转
function toDetail(noticeId) {
  router.push({
    path: noticeId
  })
}

async function init() {
  let option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: []
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '入库数量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '入库单数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '入库货值',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '出库数量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)'
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '出库单数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)'
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      },
      {
        name: '出库货值',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)'
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: []
      }
    ]
  }
  const res = await homeApi.inventoryDynamics()
  const order_date = res.data.daily_stats.map((item) => item.date)
  option.xAxis[0].data = order_date

  // 初始化 series 数据
  option.series.forEach((series, index) => {
    series.data = order_date.map((date) => {
      const dailyData = res.data.daily_stats.find((item) => item.date === date)
      if (!dailyData) return 0

      switch (series.name) {
        case '入库数量':
          return `${dailyData.into_order_number['3']}整${dailyData.into_order_number['2']}中${dailyData.into_order_number['1']}散`
        case '入库单数':
          return dailyData.into_order_count
        case '入库货值':
          return dailyData.into_order_value
        case '出库数量':
          return `${dailyData.out_order_number['3']}整${dailyData.out_order_number['2']}中${dailyData.out_order_number['1']}散`
        case '出库单数':
          return dailyData.out_order_count
        case '出库货值':
          return dailyData.out_order_value
        default:
          return 0
      }
    })
  })

  let chartDom = document.getElementById('gradient-main')
  if (chartDom) {
    let myChart = echarts.init(chartDom)
    option && myChart.setOption(option)
  }
}
</script>
<style lang="less" scoped>
.echarts-box {
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: center;
  cursor: pointer;
  .gradient-main {
    width: 1000px;
    height: 305px;
    background: #fff;
  }
}
</style>
